class TabBox {
  constructor(domRoot, config) {
    /* 接收入参 绑定到当前实例tb中 */
    this.domRoot = domRoot;
    this.config = config;

    let { tabs,boxStyles } = config;
    this.tabs = tabs
    this.boxStyles = boxStyles

    /* 自我绘制 */
    this.render();

    // 找出所有的tab标签+内容
    // const box = document.querySelector("#box");
    this.findElements();

    /* 给所有标签添加点击事件 */
    this.initListeners();

    /* 默认切换到0号tab */
    this.switchTab(0);
  }

  /* 绘制自己 */
  render() {
    this.domRoot.innerHTML = `
    <div class="box">
        <ul id="ulTabs">${this.getTabs()}</ul>
        <ol id="olContents">${this.getContents()}</ol>
    </div>
      `;

    /* 设置用户的自定义样式 */
    this.box = this.domRoot.querySelector(".box")
    if(this.boxStyles){
        for(let key in this.boxStyles){
            this.box.style[key] = this.boxStyles[key]
        }
    }
  }

  /* 生成一堆标签Li */
  getTabs() {
    let lis = "";
    // for (let key in this.config.tabs) {
    //   lis += `<li>${key}</li>`;
    // }
    this.tabs.forEach(
        item => lis += `<li>${item.tab}</li>`
    ) 
    return lis;
  }

  /* 生成一堆内容Li */
  getContents() {
    let lis = "";
    this.tabs.forEach(
        item => lis += `<li>${item.content}</li>`
    )
    return lis;
  }

  findElements() {
    /* 找出标签集合+内容集合 直接绑定到当前实例中 */
    this.tabs = this.domRoot.querySelectorAll("ul>li");
    this.contents = this.domRoot.querySelectorAll("ol>li");
  }

  initListeners() {
    this.tabs.forEach((tab, index) => {
      /* 点击第几个tab就切换之 */
      tab.onclick = (e) => {
        this.switchTab(index);
      };
    });
  }

  /* 切换标签 */
  switchTab(index) {
    // 显式一下这个tab的序号
    console.log(index);

    // 全部取消高亮
    this.tabs.forEach((t) => t.classList.remove("active"));
    // 找出序号为index的标签添加高亮
    Array.from(this.tabs)
      .find((t, i) => i === index)
      .classList.add("active");

    /* 显示序号相同的content内容 */
    // 将所有内容li都去掉active样式
    this.contents.forEach((c) => c.classList.remove("active"));

    // 再将序号为index的内容li添加active样式
    this.contents[index].classList.add("active");
  }
}
